<template>
	<view class="content">
		<template v-if="goodsInfo.id != null">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in goodsImgArr" :key="index">
					<video
							v-if="checkMediaType(item)=='video'" 
					      id="myVideo"
					      :src="item"
					      style="width: 100%;height:750rpx;margin: auto 0;"
					    ></video>
					<image v-else :src="item" mode="aspectFit" style="margin: 0 auto;"></image>
				</swiper-item>
			</swiper>
			
			<view class="Specification common" @click="Specpopup()" v-if="JSON.stringify(sku)!='{}'" >
				<view class="Specifications-left">
					<view class="select">已选 </view>
					<view class="Specifications-text">
						<text class="selected-text">
							{{sku.specificationName}}
						</text>
					</view>
				</view>
				<u-icon name="arrow-right" size="14"></u-icon>
			</view>
			<view class="goods-introduce common">
				<view class="goods-price" >
					<view class="" style="display: flex;align-items: center;">
						<view class="now-price" v-if="goodsInfo.goodsType==0" :style="{'color':templateConfig.page.themeColor}">
							<text class="price-icon" >￥</text>
							<text  v-if="JSON.stringify(sku)=='{}'">{{goodsInfo.goodsPrice}}</text>
							<text v-else>{{sku.dealPrice}}</text>
						</view>
						<view class="now-price" v-if="goodsInfo.goodsType==1" :style="{'color':templateConfig.page.themeColor}">
							<text  v-if="JSON.stringify(sku)=='{}'">{{goodsInfo.goodsPrice}}</text>
							<text v-else>{{sku.dealPrice}}</text>
							<text class="price-icon" >积分</text>
						</view>
						<view class="old-price"  v-if="JSON.stringify(sku)=='{}'">
								<text v-if="goodsInfo.scribePrice>0">￥{{goodsInfo.scribePrice}}</text>
						</view>
						<view class="old-price"  v-else>
							<text v-if="sku.scribePrice>0" >￥{{sku.scribePrice}}</text>
						</view>
					</view>
					<view  class="" style="height:60rpx;width: 120rpx;padding: 0rpx 0 0 20rpx;
					color: #fff;border-radius: 30rpx 0 0 30rpx;
					line-height: 60rpx;display: flex;align-items: center;justify-content: space-between;" v-if="couponList.length>0&&templateConfig.overall.onesState==1"  :style="{'background':templateConfig.page.themeColor}"  @click="toggleMask('show')">
						优惠券 <u-icon name="arrow-right" size="16"  color="#fff"></u-icon>
					</view>
				</view>
				<view class="goodsName">
					{{goodsInfo.goodsName}}
				</view>
				<view class="" style="color: #999;padding-bottom: 20rpx;" v-if="goodsInfo.goodsRemarks">
					{{goodsInfo.goodsRemarks}}
				</view>
				<view class="sales">
					<view class="salesTitle">
						<view class="" v-if="goodsInfo.stockNum>0" >
							库存充足
						</view>
						<view class="" v-else >
							库存不足
						</view>
					</view>
					<view class="right">
						<view class="label" @click="shareBox()">
							<aicon type="forward" size="21" color="#999"></aicon>
							<span>分享</span>
						</view>
						<view class="label" @click="addCollect()">
							<aicon v-if="is_collect" type="favorfill" size="22" :color="templateConfig.page.themeColor" ></aicon>
							<aicon v-else type="favor" size="22" color="#999"></aicon>
							<span>收藏</span>
						</view>
					</view>
				</view>
			</view>
			
			<!-- *************图文详情************* -->
			<view class="detail-img common" v-if="goodsInfo.goodsDetailsJson!==''" >
				<view class="detail-img-text">
					<view class="detail-img-title">
						商品详情
					</view>
				</view>
				<view class="detail-content">
					<u-parse :content="goodsInfo.goodsDetailsJson" ></u-parse>
				</view>
			</view>
			<view class="suspension-block">
				<view class="cart" v-if="isShow" @click="Totop()">
					<u-icon name="arrow-upward" color="#434343" size="24"></u-icon>
				</view>
			</view>
		</template>
		
		<!-- 详情底部 -->
		<view class="detail-bottom" v-if="goodsInfo.goodsType==0">
			<view class="detail-bottom-left">
				<view class=" collect home">	
					<!-- <view class="iconfont icon-kefufill" style="color: #999;font-size: 50rpx;"
					></view> -->
					<aicon type="servicefill" size="22" color="#999"></aicon>
					<text>客服</text>
					<button open-type="contact" class='btn'></button>
				</view>
				<view class="collect home" @click="Toswitch('/pages/cart/cart')">
					<!-- <view class="iconfont icon-gouwuche2" style="color: #999;font-size: 50rpx;"
					></view> -->
					<aicon type="cartfill" size="22" color="#999"></aicon>
					<text>购物车</text>
				</view>
			</view>
			<view class="detail-bottom-right">
				<view class="addcart cartHeight" :style="{'color':templateConfig.page.themeColor,border:`1rpx solid ${templateConfig.page.themeColor}`}" @click="buypopup()">
					加入购物车
				</view>
				<view class="buy cartHeight" :style="{'background':templateConfig.page.themeColor}" @click="cartpopup()">
					立即购买
				</view>
			</view>
		</view>
		<view class="detail-bottom" v-if="goodsInfo.goodsType==1">
			<view style="width:100%;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					color: #fff;border-radius: 35rpx;"  :style="{'background':templateConfig.page.themeColor}" @click="cartpopup()">
					立即兑换
			</view>
		</view>
		
		<!-- 规格选择弹窗 start -->
		<u-popup :show="shows" mode="bottom" @close="shows=false" @open="open">
			<view class="Specifications">
				<view class="Specifications-mask"></view>
				<view class="Specifications-popup">
					<view class="Specifications-popup-colse cuIcon-roundclose" @click="shows=false">
						<u-icon name="close-circle" size="24"></u-icon>
					</view>
					<view class="Specifications-popup-head">
						<view class="Specifications-popup-head-img">
							<image v-if="sku.specificationImages" mode="widthFix" :src="sku.specificationImages"></image>
							<image v-else mode="widthFix" :src="goodsInfo.rotationImgsJson[0]"></image>
						</view>
						<view class="Specifications-popup-head-text">
							<view class="" style="width: 85%;display: -webkit-box;
				-webkit-box-orient: vertical; 
				-webkit-line-clamp: 1;
				overflow: hidden; ">
								{{goodsInfo.goodsName}}
							</view>
							<view class="" style="width: 100%;" v-if="JSON.stringify(sku)!='{}'">
								<view v-if="goodsInfo.goodsType==0" class="Specifications-popup-head-text-price" :style="{'color':templateConfig.page.themeColor}">
									<text>￥</text><text>{{sku.dealPrice}}</text>
								</view>
								<view v-if="goodsInfo.goodsType==1" class="Specifications-popup-head-text-price" :style="{'color':templateConfig.page.themeColor}">
									<text>{{sku.dealPrice}}积分</text>
								</view>
								<view class="Specifications-popup-head-text-parameter">
									<text>库存:{{sku.stockNum}}</text>
								</view>
								<view class="Specifications-popup-head-text-parameter">
									已选：
									<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
										{{sItem}}
									</text>
								</view>
							</view>
							<view class="" v-else>
								<view v-if="goodsInfo.goodsType==0" class="Specifications-popup-head-text-price" :style="{'color':templateConfig.page.themeColor}">
									<text>￥</text> <text>{{goodsInfo.goodsPrice}}</text>
								</view>
								<view v-if="goodsInfo.goodsType==1" class="Specifications-popup-head-text-price" :style="{'color':templateConfig.page.themeColor}">
									<text>{{goodsInfo.goodsPrice}}积分</text>
								</view>
								<view class="Specifications-popup-head-text-parameter">
									<text>库存:{{goodsInfo.stockNum}}</text>
								</view>
							</view>
						</view>
					</view>
					
					<scroll-view scroll-y class="Specifications-huadong" v-if="specList.length>0">
						<view class="Specifications-popup-sele" v-for="(item,index) in specList" :key="index">
							<view class="Specifications-popup-sele-name">{{item.name}}</view>
							<view class="Specifications-popup-sele-list">
									<text
										v-for="(childItem, childIndex) in item.children" 
										:key="childIndex" class="tit"
										:style="{'color':childItem.selected?templateConfig.page.themeColor:''}"
										@click="selectSku(index,childIndex, item)"
									>
										{{childItem.attributeValue}}
									</text>
							</view>
						</view>
					</scroll-view>
					
					<view class="Specifications-popup-munbar">
						<view class="Specifications-popup-munbar-name">购买数量</view>
						<view class="redmunber">
							<wm-numberBox model="2"></wm-numberBox>
							<u-number-box v-model="value" :min="1" :max="JSON.stringify(sku)!='{}'?sku.stockNum:goodsInfo.stockNum">
								<view slot="minus" class="minus">
									<u-icon name="minus-circle" size="25"></u-icon>
								</view>
								<input type="text" slot="input" v-model="value" disabled style="width: 60rpx;text-align: center;border: none;" >
								<view slot="plus" class="plus">
									<u-icon name="plus-circle" :color="templateConfig.page.themeColor,border" size="25"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
					
					<view class="Specifications-popup-but">
						<view v-if="payType==1" class="buy label" @click="Jumpgwc" :style="{'background':templateConfig.page.themeColor}"> 加入购物车</view>
						<view v-else-if="payType==2" class="addcart label" @click="lijiGoumai" :style="{'background':templateConfig.page.themeColor}">
							<text v-if="goodsInfo.goodsType==0">立即购买</text>
							<text v-if="goodsInfo.goodsType==1">立即兑换</text>
							</view>
						<view class="" style="display: flex;width:100%;" v-else-if="payType==0" >
							<view class="label2 buy1"  @click="lijiGoumai" :style="{'color':templateConfig.page.themeColor,border:`1rpx solid ${templateConfig.page.themeColor}`}">立即购买</view>
							<view class="label2 addcart2" @click="Jumpgwc" :style="{'background':templateConfig.page.themeColor}">加入购物车</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-modal :show="shareShow" width="500rpx" closeOnClickOverlay @close="shareShow=false" title="选择分享方式">
			<view slot="default">
				<view class="share_box">
					<view class="label" @click="[shareCoverShow=true, shareShow=false]">
						<aicon type="picfill" size="30" color="#F54319"></aicon>
						<span>生成海报</span>
					</view>
					<view class="label">
						<aicon type="weixin" size="30" color="#07c160"></aicon>
						<span>分享好友</span>
						<button open-type="share"></button>
					</view>
				</view>
			</view>
			<view slot="confirmButton"></view>
		</u-modal>
		<shareCover :show="shareCoverShow" :goodsData="goodsInfo" @closeShare="shareCoverShow = false"></shareCover>
		 <shareToFriends ref="shareToFriends"></shareToFriends>
		<!-- 优惠券面板 -->
		<view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content">
				<!-- 优惠券页面，仿mt -->
				<view class="coupon-item" v-for="(item, index) in couponList" :key="index">
					<view class="" v-if="item.couponType != 2">
						<view class="con">
							<view class="left">
								<text class="title">{{ item.couponName }} </text>
								<text class="time" v-if="item.goodsType == 1">全部商品可用</text>
								<text class="time" v-if="item.goodsType == 2">指定商品可用</text>
							</view>
							<view class="right">
								<text class="price"
									v-if="item.couponType == 0 || item.couponType == 1">￥{{ item.couponDenomination }}</text>
								<text class="price"
									v-if="item.couponType == 2">{{ item.couponDenomination }}分</text>
								<text class="price"
									v-if="item.couponType == 3">{{ item.couponDenomination * 10 }}折</text>
								<text v-if="item.couponType == 0 ||item.couponType == 1 ||item.couponType == 3">满{{ item.howMuchFullMoney }}可用</text>
							
							</view>
		
							<view class="circle l"></view>
							<view class="circle r"></view>
						</view>
						<view class="getlin" style="">
							<text class="tips"
								v-if="item.timeType == 1">{{ item.startTime }}--{{ item.endTime }}</text>
							<text class="tips"
								v-if="item.timeType == 2">有效期至领取内{{ item.timeDay }}天内有效</text>
							<view class="linqu" style="background-color: #999;" v-if="item.receiveStatus" >已领取</view>
							<view class="linqu" v-else @click="getCoupon(item)">领取</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { insertPlugsShopCart,searchPlugsGoodsById,searchPlugsGoodsSpecificationByGoodsId,receiveCoupons,
	insertPlugsCollect,searchPlugsCollectByUserId,searchPlugsCouponsByBusinessId } from '../../static/utils/api.js';
	export default {
		data() {
			return {
				templateConfig: uni.getStorageSync('templateConfig'),
				adminInfo:uni.getStorageSync('adminInfo'),
				nowBusinessInfo:{},
				goodsId: '',
				specList:[],
				tableData:[],
				sku:{},
				specSelected:[],
				isShow: false,
				goodsInfo: {},
				shows: false,
				value: 1,
				goodsImgArr: [],
				is_collect: false,
				collectList: [],
				couponList: [],
				show2: false,
				payType:0,
				shareShow:false,
				shareCoverShow:false,
				maskState: 0,

			}
		},
		
		onLoad(options) {
			console.log(options);
			if(options.id){
				console.log(options.id);
				this.goodsId=options.id
			}
		},
		onShow() {
			this.nowBusinessInfo = uni.getStorageSync('nowBusinessInfo');
			this.specSelected=[]
			this.getGoodsList()
			this.getguige()
			this.getcollectList()
			this.getcouponList()
			// that.getCouponList();
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				this.isShow = true;
			} else {
				this.isShow = false;
			}
		},
		
		// onShareAppMessage() {
		// 	console.log(123);
		// 	let that = this;
		// 	let path = `pages/index/index?shareUserId=${uni.getStorageSync('userInfo').id}&goodsId=${that.goodsId}`;
		// 	return {
		// 		title: that.goodsInfo.goodsName,
		// 		imageUrl: that.goodsInfo.rotationImgsJson[0],
		// 		path: path,
		// 	};
		// },
		async onShareAppMessage () {
		                        let params = {
		                                storeImg:this.adminInfo.shopLogo != 0 ?this.adminInfo.shopLogo:this.nowBusinessInfo.businessLogo,        //店铺logo
		                                goodsName: this.goodsInfo.goodsName,        //商品名称
		                                goodsImg: this.goodsInfo.rotationImgsJson[0],        //商品主图
		                                price: this.goodsInfo.goodsPrice,        //商品价格
		                                themeColor: this.templateConfig.page.themeColor        //主题色
		                        }
		                        let shareUrl = await this.$refs.shareToFriends.startRender(params);
		                        let path = `pages/index/index?shareUserId=${uni.getStorageSync('userInfo').id}&goodsId=${this.goodsId}`;
		                        return {
		                                title: this.nowBusinessInfo.businessName,
		                                path: path,
		                                imageUrl: shareUrl
		                        }
		                },
		
		
		methods: {
			
			getGoodsList(){
				let data={
					id:this.goodsId
				}
				searchPlugsGoodsById(data).then(res=>{
					if(res.code==200){
						this.goodsInfo=res.body
						let list = [];
						if (res.body.rotationImgsJson != '') {
							
							list = JSON.parse(res.body.rotationImgsJson)
							res.body.rotationImgsJson=JSON.parse(res.body.rotationImgsJson)
						}
						if(res.body.videoUrl&&res.body.videoUrl!=null){
							list.unshift(res.body.videoUrl)
						}
						this.goodsImgArr = list;
						uni.setNavigationBarTitle({
							title: res.body.goodsName
						});
					}
				})
			},
			checkMediaType(url) {
				      // 获取文件扩展名
				      var extension = url.split('.').pop().toLowerCase();
				      var imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
				      var videoExtensions = ['mp4', 'wmv', 'avi', 'mov'];
				      // 判断图片
				      if (imageExtensions.includes(extension)) {
				          return 'image';
				      }
				      
				      // 判断视频
				      if (videoExtensions.includes(extension)) {
				          return 'video';
				      }
				      
				      // 扩展名不在图片或视频数组中，返回null
				      return null;
				  },
		
			// 获取优惠券
			getcouponList() {
				let postdata = {
					businessId:  this.nowBusinessInfo.businessId.toString(),
					pageNum: 1,
					pageSize: 100,
					userServiceToken: this.userToken
				};
				searchPlugsCouponsByBusinessId(postdata).then((res) => {
					if (res.code == 200) {
						// this.couponList = res.body.list;
						let arr1=[]
						let arr2=[]
						arr1 = res.body.list.filter(itm => itm.goodsType === 2);
						console.log(arr1,'arr1');
						arr1.forEach((item=>{
							if(item.goodsIds.indexOf(this.goodsInfo.id)!=-1){
								arr2.push(item)
							}
						}))
						this.couponList=arr2
						console.log(arr2,'arr1');
					}
				});
			},
			//显示优惠券面板
			toggleMask(type) {
				let timer = type === "show" ? 10 : 300;
				let state = type === "show" ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer);
			},
			getCoupon(item) {
				console.log(123);
				let that = this;
				let token = uni.getStorageSync('userInfo').accessToken;
				if (token) {
					receiveCoupons({ couponsId: item.id })
					.then((res) => {
						console.log(res,12344);
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '领取成功'
							});
							that.getcouponList();
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					})
					.catch((err)=>{
						console.log(err);
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未登录,登录才能领取哦!',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/login'
								});
							} else if (res.cancel) {
							}
						}
					});
				}
			},
			
			// 获取规格
			getguige(){
				let data = {
					goodsId: this.goodsId
				};
				searchPlugsGoodsSpecificationByGoodsId(data).then(res => {
					if (res.code == 200) {
						if (res.body.specificationInfo.length !== 0) {
							let arr = [];
							// this.specificationInfo = res.body.specificationInfo;
							for (let item of res.body.specificationInfo) {
								let obj1 = {
									name: Object.keys(item)[0],
									value: [],
									title: '',
									children: Object.values(item)[0]
								};
								console.log(item, 456);
								arr.push(obj1);
							}
							let skunameList=[]
							arr.forEach(item => {
								console.log(item.children, 7777);
								item.children[0].selected=true
								this.specSelected.push(item.children[0].attributeValue);
								let name=`${item.name}:${item.children[0].attributeValue}`
								skunameList.push(name)
								
							});
							let skuname=JSON.stringify(skunameList).replace(/\"/g, '').replace(/\[|]/g, '')
							console.log(skuname);
							this.specList = arr;
							console.log(this.specList,'guige');
							let arr1 = [];
							res.body.plugsGoodsSpecificationList.forEach(item => {
									item.specificationName= item.specificationName.replace(/\"/g, '').replace(/\{|}/g, '')
							});
							this.tableData = res.body.plugsGoodsSpecificationList;
							console.log(this.tableData );
							this.sku = this.tableData.find(item => item.specificationName === skuname)
							console.log(this.sku,'sku');
						}else{
							
						}
					}
				});
			},
			//选择规格
			selectSku(index, itemindedx,item){
				item.children.forEach((element)=>{
					element.selected=false
				})
				item.children[itemindedx].selected= true
				this.$set(item.children[itemindedx], 'selected', true);
				this.specSelected = [];
				let skunameList=[]
				this.specList.forEach(items=>{
					items.children.forEach((res=>{
						
						if(res.selected === true){
							console.log(res.attributeValue);
							this.specSelected.push(res.attributeValue); 
							let name=`${items.name}:${res.attributeValue}`
							skunameList.push(name)
						} 
					}))
					
				})
				let skuname=JSON.stringify(skunameList).replace(/\"/g, '').replace(/\[|]/g, '')
				this.sku = this.tableData.find(item => item.specificationName === skuname)
				
			},
			// 分享
			shareBox(){
				if(!uni.getStorageSync('userInfo')){
					return uni.navigateTo({url: '/pages/user/login'});
				}else{
					this.shareShow=!this.shareShow
				}
			},
			
			// 获取收藏列表
			getcollectList() {
				let that = this;
				let postdata = {
					businessId: this.nowBusinessInfo.businessId.toString(),
					page: 1,
					size: 50
				}
				searchPlugsCollectByUserId(postdata).then(res => {
					if (res.code == 200) {
						let list2 = res.body.list;
						console.log();
						that.collectList = list2.filter(itm => itm.dataId === this.goodsInfo.id);
						console.log(that.collectList,778899);
						if (that.collectList.length > 0) {
							that.is_collect = true;
						}
					}
				})
			},
			// 添加收藏
			addCollect() {
				let that = this;
				let data = uni.getStorageSync('userInfo');
				let token = data.accessToken;
				let postdata = {
					"businessId": this.nowBusinessInfo.businessId.toString(),
					"dataId": this.goodsInfo.id,
					"types": 0,
				}
				if (token == null) {
					uni.showModal({
						title: '提示',
						content: '登录才能添加宝贝哦~',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/login'
								})
							} else if (res.cancel) {}
						}
					});
				} else {
					insertPlugsCollect( postdata).then(res => {
						if (res.code == 200) {
							that.is_collect = !that.is_collect;
							if (that.collectList.length == 0) {
								uni.showToast({
									title: '收藏成功',
									duration: 500,
									icon:'success'
								});
								that.getcollectList()
							} else {
								uni.showToast({
									title: '取消收藏',
									duration: 500,
									icon:'error'
								});
							}
			
						}
					})
				}
			},
			// 已选打开弹窗
			Specpopup(){
				this.shows=true;
				this.payType=0;
			},
			// 底部加入购物车
			buypopup(){
				this.shows=true;
				this.payType=1;
			},
			// 底部立即购买
			cartpopup(){
				this.shows=true;
				this.payType=2;
			},
			// 加入购物车
			Jumpgwc() {
				let token = uni.getStorageSync('userInfo').accessToken;
				let that = this;
				if (!token) {
					uni.showModal({
						title: '提示',
						content: '登录才能添加宝贝哦~',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/login'
								})
							} else if (res.cancel) {}
						}
					});
					return
				}
				
				let postData = {
					
					goodsId: that.goodsInfo.id,
					goodsCategoryId: that.goodsInfo.categoryId,
					goodsNum: that.value,
					goodsSpecificationIds: that.sku.id||0,
					businessId: that.nowBusinessInfo.businessId.toString()
					
				};
				console.log(this.tableData.length,999);
				if (this.tableData.length!=0) {
					
					if (this.sku.stockNum <= 0) {
						uni.showModal({
							title: '提示',
							content: '库存不足!',
							showCancel: false
						});
						return
					}
					this.sku.stockNum=Number(this.sku.stockNum)- Number(that.value)
				}else{
					console.log(this.tableData.length,this.goodsInfo.stockNum ,1000);
					if (this.goodsInfo.stockNum <= 0) {
						uni.showModal({
							title: '提示',
							content: '库存不足!',
							showCancel: false
						});
						return
					}
					this.goodsInfo.stockNum=Number(this.goodsInfo.stockNum)- Number(that.value)
				}
				insertPlugsShopCart(postData).then(res => {
					// console.log("insertPlugsShopCart", res)
					if (res.code == 200) {
						uni.showToast({
							title: '加入成功',
							duration: 1000,
							icon: 'success'
						});
						this.value=1
						this.shows=false
					} else {
						uni.showToast({
							title: '加入失败',
							duration: 1000,
							icon: 'error'
						});
						if(this.tableData.length!=0){
							this.sku.stockNum=Number(this.sku.stockNum)+ Number(that.value)
						}else{
							this.goodsInfo.stockNum=Number(this.goodsInfo.stockNum)+Number(that.value)
						}
					}
				});
			},
			// 立即购买
			lijiGoumai() {
				let that = this;
				this.shows = false;
				let token = uni.getStorageSync('userInfo').accessToken;
				if (!token) {
					uni.showModal({
						title: '提示',
						content: '登录才能添加宝贝哦~',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/login'
								})
							} else if (res.cancel) {}
						}
					});
					return
				}
				
				let postData = {
					goodsId: this.goodsInfo.id,
					previewUrl:this.goodsInfo.previewUrl,
					goodsPrice:this.goodsInfo.goodsPrice,
					goodsCategoryId: this.goodsInfo.categoryId,
					goodsNum: this.value,
					goodsSpecificationIds: this.sku.id||0,
					goodsSpecification: JSON.stringify(this.sku)=='{}'?[]: [this.sku],
					businessId: this.nowBusinessInfo.businessId.toString(),
					distributionFee: this.goodsInfo.distributionFee,
					goodsName: this.goodsInfo.goodsName,
					plugsGoods:this.goodsInfo,
					userId: uni.getStorageSync('userInfo').id || 0
				};
				console.log(this.tableData.length,999);
				if (this.tableData.length!=0) {
					if (this.sku.stockNum <= 0) {
						uni.showModal({
							title: '提示',
							content: '库存不足!',
							showCancel: false
						});
						return
					}
				}else{
					console.log(this.tableData.length,1000);
					if (this.goodsInfo.stockNum <= 0) {
						uni.showModal({
							title: '提示',
							content: '库存不足!',
							showCancel: false
						});
						return
					}
				}
				
				uni.setStorage({
					key: 'shopCart',
					data: [postData],
					success: () => {
						uni.navigateTo({
							url: `/pages/order/paypal`
						});
					}
				});
				
			},
			// 去购物车
			Toswitch(route) {
				uni.switchTab({
					url: route
				})
			},
			Totop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			
			
			
			
			
			
			
			
			
			
			
			
		
			
			
			
		
			
			
			

			
			open() {},
			close() {
				this.shows = false
			},
			
			
			
		}
	}
</script>

<style lang="less">
	page{
		background-color:#f2f2f2;
	}
	.content{
		padding-bottom: 100rpx;
	}
	// 优惠券样式
	.couponBox {
		width: 94%;
		height: 180rpx;
		margin: auto;
		margin-bottom: 12rpx;
		// border-radius: 8rpx;
		display: flex;
		border: 3rpx solid #e6b4b6;

		.couponBox-left {
			width: 180rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding-bottom: 20rpx;
			border-right: 3rpx solid #f5f5f5;

			.limituse {
				width: 100%;
				text-align: center;
				padding: 6rpx 0;
				font-size: 24rpx;
				background-color: #fad8d8;
				color: #d75057;
			}

			.couponMoney {
				color: #d75057;
				font-weight: bold;
				font-size: 42rpx;
			}
		}

		.couponBox-right {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-around;
			// align-items: center;
			padding: 16rpx 26rpx;
			box-sizing: border-box;

			.couponName {
				display: flex;
				font-weight: bold;
			}

			.limitTime {
				font-size: 24rpx;
				color: #aaa;
			}

			.couponExplain {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.couponExplain-right {
					width: 160rpx;
					height: 60rpx;
					border-radius: 40rpx;
					text-align: center;
					line-height: 60rpx;
					background-color: #fad8d8;
					color: #d8696f;
				}
			}
		}
	}

	.goodsCoupon {
		display: flex;
		margin-top: 20rpx;
		justify-content: space-between;
		align-items: center;

		.goodsCoupon-right {
			display: flex;
			align-items: center;
		}

		.goodsCoupon-left {
			background-color: #e74032;
			color: #fff;
			text-align: center;
			padding: 6rpx 18rpx;
			border-radius: 40rpx;
			font-size: 26rpx;
		}
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		// padding-bottom: 120rpx;

		.swiper {
			width: 100%;
			height: 750rpx;
			image {}
		}

		.common {
			width: 96%;
			background-color: #fff;
			border-radius: 16rpx;
			// box-shadow: 0px 0px 8px 0px rgba(207, 207, 207, 0.5);
		}

		.goods-introduce {
			padding: 0rpx 26rpx;
			margin: 20rpx auto;
			box-sizing: border-box;

			.goods-price {
				display: flex;
				align-items: center;
				justify-content: space-between;
                padding: 40rpx 0 30rpx;
				.now-price {
					color: #ff4544;
					font-size: 42rpx;
					font-weight: bold;
					margin-right: 30rpx;

					.price-icon {
						font-weight: bold;
						font-size: 26rpx;
					}
				}

				.old-price {
					color: #999999;
					text-decoration: line-through;
					font-size: 28rpx;
				}
			}

			.goodsName {
				font-size: 34rpx;
				// overflow: hidden;
				// white-space: normal;
				// text-overflow: ellipsis;
				font-weight: bold;
				margin: 16rpx 0;
				display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
				-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
				-webkit-line-clamp: 2; //一个块元素显示的文本的行数
				overflow: hidden; //溢出隐藏
				// border-bottom: 1rpx solid #f2f2f2;
				padding-bottom: 20rpx;
				
			}
           
			.member {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				padding: 0 12rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
				background-color: #faf2d8;

				.member-price {
					color: #ff4544;
					font-weight: bold;
				}
			}

			.sales {
				color: #a3a3a3;
				font-size: 26rpx;
				// margin-top: 20rpx;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				border-top: 1px solid #efefef;
				.salesTitle{
					color:#19be6b;
					display:flex;
					align-items: center;
				}
			}
		}

		.evaluate {
			padding: 18rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
		}

		.detail-img {
			padding-bottom: 120rpx;
			margin: 20rpx auto;

			.detail-img-text {
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.detail-img-title {
					margin: 0 40rpx;
					font-weight: bold;
					font-size: 34rpx;
				}
			}
		}

		.suspension-block {
			width: 100rpx;
			position: fixed;
			bottom: 260rpx;
			right: 30rpx;

			.cart {
				width: 70rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 100%;
				border: 3rpx solid #d0d0d0;
				margin-bottom: 20rpx;
				background-color: rgba(255, 255, 255, 0.4);

				button::before {
					border: none;
				}

				.share-btn {
					width: 70rpx;
					height: 70rpx;
					border-radius: 100%;
					display: flex;
					justify-content: center;
					margin: 0 !important;
					padding: 0 !important;
					align-items: center;
					background-color: rgba(255, 255, 255, 0.4) !important;
				}
			}
		}

		.detail-bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			height: 120rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 0 40rpx;

			.detail-bottom-left {
				display: flex;

				.home {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #a3a3a3;
					font-size: 26rpx;
					margin-right: 32rpx;
				}
			}

			.detail-bottom-right {
				display: flex;

				.cartHeight {
					width: 220rpx;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					color: #fff;
				}

				// .addcart {
				// 	background-color: #f49b08;
				// 	border-radius: 40rpx 0 0 40rpx;
				// }

				// .buy {
				// 	background-color: #ff4e4d;
				// 	border-radius: 0 40rpx 40rpx 0;
				// }
				.addcart {
					// background-color: #f49b08;
					border: 3rpx solid #ff5831;
					color: #ff5831;
					border-radius: 40rpx 0 0 40rpx;
					box-sizing: border-box;
				}
				
				.buy {
					background-color: #ff5831;
					// height: 78rpx !important;
					border-radius: 0 40rpx 40rpx 0;
				}
			}
		}
	}

	.contentSub {
		width: 100%;
	}

	.Specification {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 26rpx;
		height: 120rpx;
        margin-top: 20rpx;
		.Specifications-left {
			display: flex;
			align-items: center;

			.select {
				color: #000;
				margin-right: 26rpx;
			}
		}
	}

	/* 规格选择弹窗 start */
	
	.Specifications {
		width: 100%;
		position: fixed;
		background-color: #fff;
		bottom: 0px;
		left: 0px;
		z-index: 999;
	}
	
	.Specifications-mask {
		width: 100%;
		height: auto;
		position: fixed;
		top: 0rpx;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		margin: 0rpx auto;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1000;
	}
	
	.Specifications-popup {
		width: 100%;
		height: auto;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		z-index: 1001;
		background: #fff;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
	}
	
	.Specifications-popup-colse {
		position: absolute;
		top: 12rpx;
		right: 14rpx;
		font-size: 30rpx;
		color: #999;
		z-index: 1002;
	}
	
	.Specifications-popup-head {
		width: 94%;
		height: auto;
		margin: 0rpx auto;
		border-bottom: 3rpx #eee solid;
		display: flex;
		flex-direction: row;
		padding: 20rpx 0rpx;
	}
	
	.Specifications-popup-head-img {
		width: 25%;
	}
	
	.Specifications-popup-head-img image {
		width: 100%;
		height: 200rpx;
		border: 3rpx #eee solid;
		display: block;
	}
	
	.Specifications-popup-head-text {
		width: 75%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-left: 3%;
		justify-content: space-around;
	}
	.Specifications-popup-head-text-spec{
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.Specifications-popup-head-text-name {
		font-size: 32rpx;
		font-weight: bold;
		width: 90%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #444;
	}
	
	.Specifications-popup-head-text-price {
		display: flex;
		flex-direction: row;
		color: #ff5831;
		font-weight: bold;
		display: table-cell;
		vertical-align: bottom;
	}
	
	.Specifications-popup-head-text-price label {
		font-size: 24rpx;
		font-weight: bold;
		margin-right: 2%;
	}
	
	.Specifications-popup-head-text-price text {
		font-size: 36rpx;
	}
	
	.Specifications-popup-head-text-parameter {
		font-size: 26rpx;
		color: #888;
	}
	
	.Specifications-popup-head-text-parameter text {
		margin-right: 3%;
	}
	
	.Specifications-huadong {
		width: 100%;
		max-height: 600rpx;
		padding-top: 20rpx;
	}
	
	.Specifications-popup-sele {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0rpx 3%;
	}
	
	.Specifications-popup-sele-name {
		width: 100%;
		height: auto;
		font-size: 30rpx;
		color: #333;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}
	
	.Specifications-popup-sele-list {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.selected{
		background: #fbebee;
		color: #ff633d;
	}
	.Specifications-popup-sele-list text {
		color: #131315;
		margin: 0rpx 0%;
		border-radius: 16rpx;
		text-align: center;
		box-sizing: border-box;
		min-width: 20%;
		// border: 3rpx #cdcdcd solid;
		background-color: #f2f2f4;
		margin-bottom: 30rpx;
		font-size: 24rpx;
		line-height: 50rpx;
		padding: 6rpx 2%;
		margin-right: 3%;
		.selected{
			background: #fbebee;
			color: #ff633d;
		}
	}
	
	.Specifications-popup-munbar {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding:0 5%;
		display: flex;
		justify-content: space-between;
		// margin-bottom: 100rpx;
		// margin-top: 30rpx;
		margin: 100rpx 0;
	}
	
	.Specifications-popup-but {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 3%;
		box-sizing: border-box;
		border-top: 3rpx #eee solid;
	
		.addcart {
			background-color: #ff5831;
		}
	
		.buy {
			background-color: #ff5831;
		}
	}
	
	.Specifications-popup-but{
		width: 90%;
		margin: 0 auto;
		.label{
			text-align: center;
			border-radius: 80rpx;
			color: #fff;
			width: 100%;
			// height: 80rpx;
			line-height: 80rpx;
			// box-sizing: border-box;
		}
		.label2{
			text-align: center;
			color: #fff;
			width:50%;
			// height: 80rpx;
			line-height: 80rpx;
			// box-sizing: border-box;
		}
		.buy1{
			// background-color: #f49b08;
			border: 3rpx solid #ff5831;
			border-radius: 80rpx 0 0 80rpx;
			color: #ff5831  ;
		}
		.addcart2{
			height: 85rpx !important;
			background-color:#ff5831;
			border-radius: 0 80rpx 80rpx 0;
		}
	}
	
	.none {
		bottom: -100%;
	}
	
	.none .Specifications-popup {
		bottom: -100%;
		transition: all 0.5s;
	}
	
	.none .Specifications-mask {
		display: none;
		transition: all 0.5s;
	}
	
	
	.show {
		bottom: 0px;
	}
	
	.show .Specifications-popup {
		bottom: 0%;
		transition: all 0.5s;
	}
	
	.show .Specifications-mask {
		display: block;
		transition: all 0.5s;
	}
	
	.rmoiu {
		// background: #f49e0e;
		// border: 3rpx solid #f49e0e !important;
		// color: #fff !important;
		// background: #ff5251;
		background-color:#f7d6cd !important;
		color: #ff5831 !important;
		border: 3rpx solid #ff5831;
		// border: 3rpx solid #ff5251;
	}
	// .share_box{
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 		width: 400rpx;
	// 		.label{
	// 			display: flex;
	// 			flex-direction: column;
	// 			align-items: center;
	// 			justify-content: space-between;
	// 			flex: 1;
	// 			padding: 30rpx 0 0;
	// 			position: relative;
	// 			span{
	// 				color: #1c1c1c;
	// 				font-size: 30rpx;
	// 				padding-top: 6rpx;
	// 			}
	// 			button{
	// 				position: absolute;
	// 				width: 100%;
	// 				height: 100%;
	// 				top: 0;
	// 				left: 0;
	// 				opacity: 0;
	// 			}
	// 		}
	// 	}

	
	/* 规格选择弹窗 end */
	.right{
		display: flex;
		// flex: 1;
		// height: 104rpx;
		min-width: 0;
		white-space: nowrap;
		.label{
			display: flex;
			flex-direction: column;
			padding: 0 20rpx;
			    align-items: center;
			    justify-content: center;
		}
	}
	.share_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 400rpx;
		.label{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			padding: 30rpx 0 0;
			position: relative;
			span{
				color: #1c1c1c;
				font-size: 26rpx;
				padding-top: 6rpx;
			}
			button{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
	}
	.btn{
		position: absolute;
		top: 0;
		left: 0;
		width: 12%;
		height: 100%;
		opacity: 0;
	}
	
	/* 优惠券面板 */
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: 0.3s;
	
		.mask-content {
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: 0.3s;
			overflow-y: scroll;
		}
	
		&.none {
			display: none;
		}
	
		&.show {
			background: rgba(0, 0, 0, 0.4);
	
			.mask-content {
				transform: translateY(0);
			}
		}
	}
	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20rpx 24rpx;
		background: #fff;
	
		.con {
			display: flex;
			align-items: center;
			position: relative;
			height: 120rpx;
			padding: 0 30rpx;
	
			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: "";
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}
	
		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100rpx;
		}
	
		.title {
			font-size: 32rpx;
			color: #303133;
			margin-bottom: 10rpx;
		}
	
		.time {
			font-size: 24rpx;
			color: #909399;
		}
	
		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #606266;
			height: 100rpx;
		}
	
		.price {
			font-size: 44rpx;
			color: #ff633d;
	
			&:before {
				font-size: 34rpx;
			}
		}
	
		.getlin {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
	
			.tips {
				font-size: 24rpx;
				color: #999;
				line-height: 60rpx;
			}
	
			.linqu {
				font-size: 26rpx;
				color: #fff;
				background-color: orangered;
				width: 100rpx;
				height: 40rpx;
				border-radius: 20rpx;
				text-align: center;
				line-height: 40rpx;
			}
		}
	
		.circle {
			position: absolute;
			left: -6rpx;
			bottom: -10rpx;
			z-index: 10;
			width: 20rpx;
			height: 20rpx;
			background: #f3f3f3;
			border-radius: 100px;
	
			&.r {
				left: auto;
				right: -6rpx;
			}
		}
	}
</style>
<style scoped>
	/deep/ ._root{
		padding: 0 26rpx;
	}
</style>